<template>
	<view class="container">
		<view class="address_info" v-if="isShowAddress">
			<view class="address">
				{{address}}
			</view>
			<view class="info">
				<view class="name">{{userName}}</view>
				<view class="phone">{{telNumber | hidePhone}}</view>
			</view>
		</view>
		<view class="address_container" v-else>
			<view class="address_btn" @click="chooseAddress">
				选择地址
			</view>
		</view>
		<view class="products_container">
			<view class="name">
				已选商品
			</view>
			<view class="product_list">
				<product 
				v-for="(item, index) in cart" 
				:key="index" 
				:goods_name="item.goods_name"
				:goods_id="item.goods_id"
				:goods_price="item.goods_price"
				:goods_small_logo="item.goods_small_logo"
				:goods_amount="item.amount"></product>
			</view>
		</view>
		<view class="total_container" :style="{ 'margin-bottom': isIphoneX ? '20rpx': 0 }">
			<view class="total_price">
				<view>合计: </view>
				<view class="price">¥{{totalPrice}}</view>
			</view>
			<view @click="pay" class="pay_btn" :class="isShowAddress? '' : 'disable'">
				去支付({{totalCount}})
			</view>
		</view>
	</view>
</template>

<script>
	import Product from '@/components/Product.vue'
	export default {
		data() {
			return {
				cart: [],
				totalPrice: 0,
				totalCount: 0,
				isShowAddress: false, // 控制是否显示收货地址，还是选择地址按钮
				address: '', // 收货地址
				userName: '', // 收货人名字
				telNumber: '', // 收货人电话
				isIphoneX: false, // 是否为IPhoneX
			};
		},
		async onLoad(options) {
			this.totalPrice = options.totalPrice;
			this.totalCount = options.totalCount;
			// 过滤已选择商品
			const cart = uni.getStorageSync('cart')
			this.cart = cart.filter(item => {
				return item.checked;
			})
			
			// 获取平台的信息
			const sysInfo = uni.getSystemInfoSync()
			this.isIphoneX = sysInfo.model === 'iPhone X';
		},
		components: {
			Product
		},
		methods: {
			async chooseAddress() {
				// 调用微信地址本
				const [error, res] = await uni.chooseAddress()
				
				if (!error) {
					this.isShowAddress = true;
					// 省+市+区+详细收货地址
					this.address = res.provinceName + res.cityName + res.countyName + res.detailInfo;
					this.userName = res.userName;
					this.telNumber = res.telNumber;
				}
			},
			// 支付按钮事件
			async pay() {
				const token = uni.getStorageSync('token');
				// 第一种情况，没有选择地址
				if (!this.isShowAddress) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
				// 当选择地址，没有登录，跳转到登录
				// 判断token是否存在
				} else if (!token) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				} else {
					// 生成订单
					// 准备提交给服务端的商品数据
					const requestProduct = this.cart.map(item => {
						return { goods_id: item.goods_id, goods_number: item.amount, goods_price: item.goods_price }
					})
					const [orderError, orderRes] = await uni.request({
						url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create',
						method: 'POST',
						header: {
							Authorization: token
						},
						data: {
							order_price: this.totalPrice,
							consignee_addr: this.address,
							goods: requestProduct
						}
					})
					if (orderRes.data.meta.status === 200) {
						// 发起支付
						const [payError, payRes] = await uni.request({
							url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder',
							method: 'POST',
							header: {
								Authorization: token
							},
							data: {
								order_number: orderRes.data.message.order_number
							}
						})
						const [requestPaymentError, requestPaymentRes] = await uni.requestPayment(payRes.data.message.pay);
						// 支付成功
						if (!requestPaymentError) {
							uni.showToast({
								icon: 'none',
								title: '支付成功'
							})
							uni.redirectTo({
								url: '/pages/order/index'
							})
							this.clearPaymentProduct();
						}
					}

				}
			},
			// 清除已经结算的商品
			async clearPaymentProduct() {
				// 删除已经结算的商品
				// 结算的商品列表 this.cart
				// 本地缓存的购物车 uni.getStorage('cart')
				// 把本地缓存的购物车删除已经结算的商品
				const [err, originCart] = await uni.getStorage({
					key: 'cart'
				})
				const notPayCart = originCart.data.filter(item => {
					return !item.checked;
				})
				uni.setStorage({
					key: 'cart',
					data: notPayCart
				})
			}
		},
		filters: {
			// 隐藏联系方式敏感信息，18661234567 =》 1866****567
			// value 过滤器前面的值
			hidePhone(value) {
				// 数据处理
				// 第一步，截取字符串的前四位
				const start = value.substr(0, 4)
				// 第二步，从字符串末尾截取三位
				const end = value.substr(-3)
				return start + '****' + end;
			}
		}
	}
</script>

<style lang="less">
.address_container{
	margin: 20rpx;
	height: 187rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.address_btn{
		width: 303rpx;
		height: 89rpx;
		line-height: 89rpx;
		text-align: center;
		border-radius: 44.5rpx;
		border: 2rpx solid #EA4350;
		color: #EA4350;
		font-weight: 700;
	}
}	
.address_info{
	margin: 20rpx;
	margin-bottom: 0;
	height: 187rpx;
	.address{
		padding: 16rpx 16rpx 18rpx 29rpx;
		font-size: 30rpx;
		font-weight: 700;
	}
	.info{
		display: flex;
		font-size: 26rpx;
		.name{
			padding: 0 29rpx;
		}
		.phone{
			
		}
	}
}
.products_container{
	border-top: 35rpx solid #f9f9f9;
	padding: 20rpx;
	.name{
		font-size: 26rpx;
		color: #434343;
		padding-left: 26rpx;
		padding-bottom: 26rpx;
		font-weight: 700;
	}
}
.total_container{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding:0 28rpx;
	justify-content: space-between;
	height: 83rpx;
	align-items: center;
	.total_price{
		display: flex;
		font-size: 26rpx;
		.price{
			font-size: 28rpx;
			color: #EA4350;
			font-weight: 700;
			padding-left: 20rpx;
		}
	}
	.pay_btn{
		width: 150rpx;
		height: 52rpx;
		font-size: 21rpx;
		line-height: 52rpx;
		text-align: center;
		background-color: #ea4350;
		color: #fff;
		border-radius: 26rpx;
	}
	.disable{
		background-color: #B6B6B6;
	}
}
</style>
